<template>
  <div class="select-wrap">
     <header> 
             <van-search v-model="value" placeholder="渴望狗粮7.2折起" 
             shape="round"
             background="#f7f7f7"
             @click="toSearch"
             >
        </van-search>   
     </header>
        <!-- 第一个盒子 -->
       <div class="top">

      
         <div>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
                <template v-if="doglist[0]">

                <van-swipe-item v-for="(item,index) in (doglist[0].data.images)" :key="index">
                    <img :src="item.img_url" alt="">
                    </van-swipe-item>
                </template>
            </van-swipe>
            <a href="" >
                 <img src="https://img2.epetbar.com/2021-04/08/14/e376e2459240ce586d95255f437593ce.png" alt="">
                 <img src="https://static.epetbar.com/mini_images/emall/index/index2.png" alt="">
            </a>
                 
         </div>
         <template v-if="doglist[1]">

         <div>
            <van-image v-for="(item,index) in (doglist[1].data.menus)" :key="index"
            @click="hardlepickRouter(item)"
                width="70"
                height="64"
                :src="item.img_url"
                />
         </div>
         </template>
         <template v-if="doglist[2]">
         <div>
             <van-image v-for="(item,index) in (doglist[2].data.column_images[0])" :key="index"
                    fit="fill"
                    :src="item.img_url"
                    />
         </div>
         </template>
         <!-- <div>
              <van-image v-for="(item,index) in (doglist[3].data.column_images)" :key="index"
                     width="118"
                     height="164"
                    :src="item[0].img_url"
                    />
         </div> -->
         <!-- <div>
              <van-image v-for="(item,index) in (doglist[4].data.column_images)" :key="index"
                     width="118"
                     height="164"
                    :src="item[0].img_url"
                    />
         </div> -->
         <!-- <template v-if="doglist[3]">
          <div>
              <van-image v-for="(item,index) in (doglist[3].data.column_images)" :key="index"
                     
                     
                     fit="fill"
                    :src="item[0].img_url"
                    />
         </div>
         </template>

         <template v-if="doglist[4]">
          <div>
              <van-image v-for="(item,index) in (doglist[4].data.column_images)" :key="index"
                     width="91"
                     height="169"
                    :src="item[0].img_url"
                    />
         </div>  
         </template> -->

       </div>
       <!-- 第二个盒子 -->
       <div class="e-list">
         <div>
           <p>养宠风尚 拒绝平庸</p>
           <template v-if="doglist[5]">
            <div  v-for="item in doglist[5].data.list" :key="item.gid">
              <div>
                <img :src="item.img_src" alt="">
              </div>
              <div>
                <p>
                  {{item.title}}
                </p>
                <div>
                  <div>
                    <img :src="item.goods_img" alt="">
                  </div>
                  <div>
                    <p>￥{{item.sale_price}}</p>
                    <p>{{item.be_interested}}</p>
                  </div>
                </div>
              </div>
            </div>
           </template>
           

         </div>
         <!-- 第二个数据 -->
         <div>
            <div>
            猜你喜欢
          </div>
          <!-- <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              > -->
          <div>
             <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
              >
              <div 
              @click="toDetail"
              v-for="item in goodlist" :key="item.gid">
                <div>
                  <div>
                    <img :src="item.img.img_url" alt="">
                  </div>
                  <div>
                    <p>{{item.title}}</p>
                    <p>
                      <span>{{item.goods_properties[0]}}</span>
                      <span>{{item.goods_properties[1]}}</span>
                      <span>{{item.goods_properties[2]}}</span>


                    </p>
                    <div>
                        <span>￥</span>
                        <span>{{item.normal_price.price}}</span>
                        <span :class="{redd :item.normal_price.tag_color_flag==='pink'}">{{item.normal_price.tag_content}}</span>
                        <span>...</span>
                    </div>

                  </div>
                </div>
                <div>
                  <div>
                    <img src="https://img2.epetbar.com/nowater/2019-12/24/15/f21e0cf044f2fc066ba22850b59a6c3a.png" alt="">
                  </div>
                  <div>
                    <img :src="item.rank_detail.icon" alt="">
                    <span>{{item.rank_detail.message}}</span>
                    <img src="https://static.epetbar.com/epet_wap_img/index/arrow.png" alt="">
                  </div>
                </div>
                   <!-- <div>
                  <div>
                    <img src="https://img2.epetbar.com/nowater/2019-12/24/15/f21e0cf044f2fc066ba22850b59a6c3a.png" alt="">
                  </div>
                  <div>
                    <img :src="item.rank_detail.icon" alt="">
                    <span>{{item.rank_detail.message}}</span>
                    <img src="https://static.epetbar.com/epet_wap_img/index/arrow.png" alt="">
                  </div>
                </div> -->

              </div>
            </van-list>

          </div>
            <!-- </van-list> -->

         </div>

         
          <!-- 底部 -->
       </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Search } from 'vant';
Vue.use(Search);
import { Icon } from 'vant';
Vue.use(Icon);
import { Tab, Tabs } from 'vant';
Vue.use(Tab);
Vue.use(Tabs);
import { Image as VanImage } from 'vant';
Vue.use(VanImage);
import {Swipe, SwipeItem,Grid, GridItem,List, Tabbar, TabbarItem } from 'vant';

Vue.use(Swipe).use(SwipeItem).use(Grid).use(GridItem).use(List).use(Tabbar).use(TabbarItem);


export default {
    data(){
        return{
            value:'',
            doglist:[],
            loading: false,
            finished: false,
            goodlist:[],
            routerpick:[],
            routername:[]

        }
    },
    created(){
      // this.pagesize=16
      this.currentpage=2
      // console.log(this.pagesize)

    },
    async mounted() {
        // axios是三方库，用的时候需要导入
          // let result = await this.$http.get("/index/home.html?version=554&pet_type=dog&leaf=1&system=wap&isWeb=1&distinct_id=17b115e5cf52da-026f99bd8f349ac-5437971-250125-17b115e5cf6f51&debug_param=")
          // console.log(result)
          let result =await this.$http.get({url:'/index/home.html',
          params:{
            version:554,
            pet_type:'dog',
            leaf:1,
            system:'wap',
            isWeb:1,
            distinct_id:'17b115e5cf52da-026f99bd8f349ac-5437971-250125-17b115e5cf6f51',
            debug_param:''}
          })
          this.doglist=result.data.datas.list
          // console.log(this.$http)

           this.routerpick=[...this.$router.options.routes]
        // console.log(this.routerpick)
          this.routerpick.forEach(async(item)=>{
          await this.routername.push(item.name)

        })
        // console.log(this.routername)

     

    },
    methods: {
      async getDate(){
        // let result = await axios.get(`/v3/index/home.html?version=554&pet_type=dog&leaf=${this.currentpage}&system=wap&isWeb=1&distinct_id=17b115e5cf52da-026f99bd8f349ac-5437971-250125-17b115e5cf6f51&debug_param=`)
        let result =await this.$http.get({url:'/index/home.html',
          params:{
            version:554,
            pet_type:'dog',
            leaf:this.currentpage,
            system:'wap',
            isWeb:1,
            distinct_id:'17b115e5cf52da-026f99bd8f349ac-5437971-250125-17b115e5cf6f51',
            debug_param:''}
          })

       // console.log(result)
          this.goodlist=[
            ...this.goodlist,
            ...result.data.datas.list[0].data.list
          ]
          // console.log(this.goodlist)

      },
      async onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
         await this.getDate()
          this.loading = false;

         this.currentpage++
      
        // setTimeout(() => {
          // for (let i = 0; i < 10; i++) {
          //   this.list.push(this.list.length + 1);
          // }

          // 加载状态结束

          // 数据全部加载完成
          if (this.goodlist.length >= 60) {
            this.finished = true;
          }
        // }, 1000);
      },
      toSearch(){
        this.$router.push('/search')
      },
      toDetail(){
        this.$router.push('/detail')

      },
      hardlepickRouter(item){
        if(this.routername.includes(item.name)){
          this.$router.push({
            name:item.name
          })

        }
       

      }

  },
  // watch:{
  //   $route:{
  //      immediate: true,
  //   }
  // }

}
</script>
<style lang="stylus" scoped>
.select-wrap
    height 100%
    header
      height .44rem
      width 100%
    >.top
        padding .1rem .05rem 0 .05rem
        background-color #f7f7f7
        >div:first-child  
          >a
              width 100%
              height .6rem
              position relative
              >img:first-child
                  width 100%
                  height 100%
              >img:last-child
                  width .36rem
                  height .44rem
                  position absolute
                  top -.19rem
                  right .1rem
          .my-swipe .van-swipe-item 
              color: #fff;
              font-size: 20px;
              line-height: 150px;
              text-align: center;
              border-radius .1rem .3rem .1rem .1rem
              box-sizing border-box
              >img
                  width 99.4%
                  height 100%
        >div:nth-child(2)
          margin-top .2rem
        >div:nth-child(3) 
         
          width 100%
        >div:nth-child(4) 
          height 1.64rem
          width 100%
      >.e-list
        background-color #f7f7f7
        height 20rem
        width 100%
        padding .1rem .1rem .1rem .1rem
        >div:first-child
          height 2.9rem
          background-color #fff
          >p
            height .3rem
            font-weight 700
            font-size .18rem
            margin 0 0 .1rem 0
            padding-top .1rem
          >div
            display flex 
            margin-bottom .1rem
            border-radius .1rem .3rem .1rem .1rem
            >div:first-child
              width 1.9rem
              height 1.16rem         
              >img
                width 100%
                height 100%
            >div:last-child
              width 1.55rem
              padding .1rem
              background-color #f7f7f7
              margin-right .1rem
              >p
                height .46rem
              >div
                height .5rem
                display flex
                >div:first-child
                  width .5rem
                  height .5rem
                  background-color #fff
                  >img
                    width 100%
                    height 100%
                >div:last-child
                  padding-left .1rem
                  >p:first-child
                    font-size .14rem
                    font-weight 700
                  >p:last-child
                    text-overflow ellipsis
                    white-space nowrap
                    color: #999
                    font-size: 12px


                    
        >div:nth-child(2) 
          height 100% 
          
          >div:first-child
            height .45rem
            font-size .16rem
            font-weight 700
            padding 0 .1rem 0 .1rem
            margin-top .1rem
          
          >div:nth-child(2) 
              height 9rem
              >.van-list
                display flex
                flex-wrap wrap
                margin-right .1rem
                >div
                  width 1.72rem
                  height 3.33rem
                  background-color #fff
                  >div:first-child
                    width 1.72rem
                    height 2.53rem
                    padding .05rem
                    >div:first-child
                        height 1.72rem
                        >img
                          width 100%
                          height 100%
                    >div:last-child
                        height .76rem
                        >p:first-child
                          overflow hidden
                          text-overflow ellipsis
                          white-space nowrap
                          font-size .12rem
                          margin-top .05rem
                        >p:nth-child(2)
                          height .25rem
                          >span
                            border 1px solid gray
                            font-size: 0.14em
                            line-height: 1.5
                            color #666
                            padding .01rem
                        >div
                          margin-top .05rem
                          position relative
                          >span:first-child
                            color #ff5757
                            font-size .12rem
                            font-weight 700
                          >span:nth-child(2)
                            color #ff5757
                            font-size .14rem
                            font-weight 700
                          >span:nth-child(3) 
                            background url(http://static.epetbar.com/epet_wap_img/index/textbg1.png) no-repeat
                            min-width 50px
                            background-size 100% 100%
                            margin-left 2px
                            padding-left 3px
                            height 16px
                            line-height 16px
                            text-align center
                            color #fff
                            font-size .1rem
                            &.redd
                              background url(http://static.epetbar.com/epet_wap_img/index/textbg2.png) no-repeat
                          >span:nth-child(4)
                            position absolute
                            right .1rem
                        

                  >div:last-child
                    width 1.72rem
                    height .5rem
                    position relative
                    >div:first-child
                      width 1.72rem
                      height .5rem
                      >img
                        width 100%
                        height 100%
                    >div:last-child
                      display flex
                      justify-content center
                      align-items center
                      position absolute
                      top .1rem
                      left .2rem
                      >img:first-child
                        border 0
                        vertical-align middle
                        width .13rem
                        height .13rem
                      >img:last-child
                        border 0
                        vertical-align middle
                      >span
                        overflow hidden
                        text-overflow ellipsis
                        white-space nowrap
                        font-size .12rem
                        font-weight 700
                        margin 0 .05rem 0 .05rem
                        text-align center
                        width 1.1rem
      
  
</style>